<template>
  <div>
    <van-nav-bar
      :title="`${film.name}`"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="item">
      <!-- 海报图片 -->

      <div class="photo">
        <img
          v-lazy="this.film.poster"
          alt=""
          style="display: block; width: 100%; height: 100%; margin-top: -320px"
        />
      </div>
      <div class="bg"></div>
      <!-- 信息 -->
      <!-- <div>{{ this.film }}</div> -->
      <div class="message" v-if="film">
        <div class="one">
          <div>
            <span>{{ this.film.name }}</span>
            <span>{{ this.film.item.name }}</span>
          </div>
          <span> {{ this.film.grade }}分 </span>
        </div>
        <div class="two">
          <div>{{ this.film.category }}</div>
          <div>{{ this.film.premiereAt | parseTime }}上映</div>
          <div>
            <span>{{ this.film.nation }}|{{ this.film.runtime }}</span>
          </div>
          <div class="van-multi-ellipsis--l2">{{ this.film.synopsis }}</div>
        </div>
      </div>
      <!-- 演职人员 -->
      <div class="actor">
        <div class="one">演职人员</div>
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div
              v-for="(item, index) in film.actors"
              :key="index"
              class="swiper-slide"
            >
              <img v-lazy="item.avatarAddress" alt="" width="85" />
              <div>{{ item.name }}</div>
              <div>{{ item.role }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 选座购票 -->
      <van-button
        type="primary"
        block
        color="#ff5f16"
        style="position: fixed; bottom: 0px; width: 414px"
        >选座购票</van-button
      >
    </div>
  </div>
</template>

<script>
import url from "@/config/url";
// import "../../../node_modules/swiper/swiper.css";
import Vue from "vue";
import { Swipe, SwipeItem, Button } from "vant";
import { NavBar } from "vant";

Vue.use(NavBar);
Vue.use(Button);
// Vue.use(Swipe);
Vue.use(SwipeItem);
// 导入swiper
import Swiper from "swiper";
// 导入swiper样式
import "../../assets/swiper.min.css";
// import './swiper.min.css'
export default {
  data() {
    return {
      film: {
        item: {},
      },
    };
  },
  methods: {
    onChange(index) {
      console.log(index);
    },
  },
  mounted() {
    // console.log(document.querySelector('.mySwiper'));
    new Swiper(".mySwiper", {
      slidesPerView: 4,
      // spaceBetween: 10,
      // freeMode: true,
      // pagination: {
      //   el: ".swiper-pagination",
      //   clickable: true,
      // },
    });
  },
  created() {
    // 进来时隐藏底部菜单
    this.$store.commit("film/changeFooter");
    // 获取数据
    this.$http
      .get(url.filmInfo + "?filmId=" + this.$route.params.id)
      .then((res) => {
        console.log(res);
        this.film = res.data.film;
      });
  },

  beforeDestroy() {
    // 退出时显示底部菜单
    this.$store.commit("film/changeFooter");
  },
};
</script>

<style lang="scss" scoped>
body {
  background-color: rgba(221, 221, 221, 0.317);
}
.item {
  position: relative;
  .message {
    width: 100%;
    height: 220px;
    background-color: white;
    position: absolute;
    top: 530px;
    box-sizing: border-box;
    padding: 15px;

    .one {
      display: flex;
      justify-content: space-between;
      font-size: 18px;

      > span {
        color: orange;
      }
    }
    .two {
      font-size: 13px;
      color: #797d82;
      margin-top: 6px;
      > div {
        margin: 5px 0;
      }
    }
  }
  .actor {
    position: absolute;
    top: 690px;
    height: 400px;
    width: 100%;
    .one{
      padding-left: 15px;
    
    }
    .swiper-wrapper {
      width: 100%;
      padding-left: 15px;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.van-toast--middle {
  position: absolute;
}

::v-deep .van-nav-bar__text {
  color: black;
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}
</style>
